<template>
  <div class="card">
    <div class="cardbody">
      <div class="row">
        <div class="col-2">
          <img
            src="https://ts1.cn.mm.bing.net/th?id=OIP-C.8TsvXb-J400b4Nr_p1xLGAHaHa&w=250&h=250&c=8&rs=1&qlt=30&o=6&dpr=2&pid=3.1&rm=2"
            class="img-fluid">
        </div>
        <div class="col">
          <form @submit.prevent="search" class="row">
            <div class="col-8">
              <label for="inputPassword2" class="visually-hidden">Password</label>
              <input v-model="search_content" type="text" class="form-control" id="inputPassword2" placeholder="请输入要搜索的内容"
                style="width:570px;border-color: orange;border-width: thick;">
            </div>
            <div class="col-1"></div>
            <div class="col-3">
              <button type="submit" class="btn btn-primary mb-3" style="height:47px;">搜索</button>
            </div>
          </form>
        </div>
        <div class="col-2"></div>
      </div>
    </div>
  </div>

  <div class="card" style="margin-top: 20px;">
    <div class="cardbody">
      <div class="container text-center">
        <div class="row align-items-center">
          <div class="col-auto">
            价格区间
          </div>
          <div class="col-auto">
            <input v-model="min_price" type="text" class="form-control" id="inputPassword2" placeholder="￥"
              style="width: 60px;">
          </div>
          <div class="col-auto">
            -----
          </div>
          <div class="col-auto">
            <input v-model="max_price" type="text" class="form-control" id="inputPassword2" placeholder="￥"
              style="width: 60px;">
          </div>
          <div class="col-auto">
            <button @click="searchByprice" type="submit" class="btn btn-primary">确认</button>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div style="margin-top: 30px;width: 1203px;margin-left: 95px;" class="card">
    <div class="cardbody">
      <div class="fl" v-for="sp in $store.state.products" :key="sp.id">
        <div class="tupian" style="width:300px;">
          <a><img @click="gotodetails(sp.id)" style="width:270px;height:300px;" :src="sp.photo"></a>
          <div class="shadow">{{ sp.description }}</div>

          <div class="card">
            <div class="body shadow">
              <div style="color:red">价格：￥{{ sp.price }}
                <button @click="addfavorite(sp.id)" v-if="!$store.state.is_favorites[sp.id]" type="button"
                  class="btn btn-sm btn-outline-info">收藏</button>
                <button v-else type="button" class=" have btn btn-sm btn-outline-info">已收藏</button>
              </div>
            </div>
          </div>

          <div class="card">
            <div class=" body shadow">
              <div>商品名：{{ sp.productname }}
                <button @click="addshopcar(sp.id)" v-if="!$store.state.is_shopcarts[sp.id]" type="button"
                  class="btn btn-sm btn-outline-info">添加购物车</button>
                <button v-else type="button" class=" have btn btn-sm btn-outline-info">已添加购物车</button>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="body shadow">
              <div>库存：{{ sp.inventory }}</div>
            </div>
          </div>

          <div class="card">
            <div class="body shadow"> <button style="width:100%" @click="deleteproduct(sp.id)"
                v-if="$store.state.username === '管理员'" type="button"
                class=" have btn btn-sm btn-outline-info">下架该商品</button></div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import ConTent from '@/components/ConTent';
import $ from 'jquery';
import { useStore } from 'vuex';
import router from '@/router/index';
import { ref } from 'vue';
export default {
  name: 'HomeView',
  components: {
    //ConTent
  },

  setup() {
    let store = useStore();
    let search_content = ref("");
    let min_price = ref("");
    let max_price = ref("");
    const addfavorite = (productid) => {
      if (store.state.is_login) {
        store.commit("addfavorites", productid);
        $.ajax({
          url: "http://8.134.248.229:10085/favorite/post/",
          type: "post",
          headers: { Authorization: "Bearer " + store.state.token, },
          data: {
            productid: productid,
            userid: store.state.id,
          },
          success(resp) {
            if (resp.error_message === "success")
              console.log(resp.error_message);
          }
        })
      } else {
        router.push({ name: "login" });
      }
    };


    const search = () => {
      if (search_content.value !== "") {
        store.dispatch("searchByname", {
          search_content: search_content.value,
        })
      }
    };

    const searchByprice = () => {
      if (max_price.value !== "" && min_price.value !== "") {
        store.dispatch("searchByprice", {
          min_price: min_price.value,
          max_price: max_price.value,
        })
      }
    };

    const addshopcar = (productid) => {
      store.commit("addshopcarts", productid);
      $.ajax({
        url: "http://8.134.248.229:10085/shopcarts/add/",
        type: "post",
        headers: { Authorization: "Bearer " + store.state.token, },
        data: {
          productid: productid,
          userid: store.state.id,
        },
        success() {

        }
      })
    };
    const gotodetails = (productid) => {
      router.push({ name: 'product_details', params: { id: productid } });
    };

    const deleteproduct = (productid) => {
      for (let i in store.state.products) {
        if (productid === store.state.products[i].id) {
          store.state.products.splice(i, 1);
        }
      }

      store.dispatch("deleteproduct", {
        productid: productid,
      })
    }
    return { addfavorite, search, search_content, max_price, min_price, searchByprice, addshopcar, gotodetails, deleteproduct };
  }
}
</script>

<style scoped>
.col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.show {
  display: flex;
}

.fl {
  float: left;
}

/* .sc{
  width:75px;
  height:25px;
} */
.tupian:hover {
  transform: scale(1.05);
}

.shadow {
  font-weight: lighter;
  text-align: center;
}

.have {
  border-color: red;
  color: red;
}</style>
